<template>
  <div>
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="false">
          <a-input v-decorator="['docId', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-col :md="12" :sm="24">
          <a-form-item label="关联船舶" :labelCol="{ span: 6 }">
            <a-input
              :disabled="disabled"
              v-decorator="['vesselName', { rules: [{ required: true, message: '请输入!' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="排放时间" :labelCol="{ span: 6 }">
            <!-- <a-input v-decorator="['dischargeTimeStr', { rules: [{ required: true, message: '请输入!' }] }]" /> -->
            <a-date-picker
              :disabled="disabled"
              v-decorator="['dischargeTimeStr']"
              format="YYYY-MM-DD HH:mm"
              :show-time="{ format: 'HH:mm' }"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="排放地点" :labelCol="{ span: 6 }">
            <a-input
              :disabled="disabled"
              v-decorator="['dischargePlace', { rules: [{ required: true, message: '请输入!' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="负责人" :labelCol="{ span: 6 }">
            <a-input
              :disabled="disabled"
              v-decorator="['managerName', { rules: [{ required: true, message: '请输入!' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系方式" :labelCol="{ span: 6 }">
            <a-input
              :disabled="disabled"
              v-decorator="['managerContact', { rules: [{ required: true, message: '请输入!' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="申请说明" :labelCol="{ span: 3 }">
            <a-input :disabled="disabled" v-decorator="['remark']" />
          </a-form-item>
        </a-col>
        <!-- <a-form-model
          v-for="(item, index) in detailList"
          :key="index"
          :ref="'Form' + index"
          :model="item"
          :rules="rules"
        > -->
        <a-col class="bdr" v-for="(item, index) in detailList" :key="index" :md="24" :sm="24">
          <button type="button" @click="delitem(index)" aria-label="Close" class="ant-modal-close">
            <span class="ant-modal-close-x">
              <a-icon type="close" />
            </span>
          </button>
          <a-col :md="12" :sm="24">
            <a-form-item label="污染物种类" :labelCol="{ span: 6 }">
              <a-select
                :disabled="disabled"
                v-model="item.pollutantType"
                placeholder="请选择"
                @change="handleProvinceChange(item.pollutantType, index)"
                :value="item.pollutantType"
              >
                <a-select-option v-for="(itm, idx) in POLLUTANT_TYPE" :key="idx" :value="itm.code">
                  {{ itm.codeDesc }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item>
              <a-select
                :disabled="disabled"
                v-model="item.pollutantSort"
                placeholder="请选择"
                :value="item.pollutantSort"
              >
                <a-select-option v-for="(itm, idx) in item.POLLUTANT_SUB_TYPE" :key="idx" :value="itm.code">
                  {{ itm.codeDesc }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="接收单位" :labelCol="{ span: 6 }">
              <a-select
                :disabled="disabled"
                v-model="item.processState"
                placeholder="请选择"
                :value="item.processState"
                default-value="0"
              >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="体积/重量" :labelCol="{ span: 6 }">
              <a-input :disabled="disabled" v-model="item.pollutantVolume" />
            </a-form-item>
          </a-col>
          <!-- <a-col :md="12" :sm="24">
            <a-form-item label="重量" :labelCol="{ span: 6 }">
              <a-input v-model="item.pollutantWeight" />
            </a-form-item>
          </a-col> -->
          <a-col :md="12" :sm="24">
            <a-form-item label="处理情况" :labelCol="{ span: 6 }">
              <a-input :disabled="disabled" v-model="item.returnFlag" />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="处理说明" :labelCol="{ span: 3 }">
              <a-input :disabled="disabled" v-model="item.remark" />
            </a-form-item>
          </a-col>
        </a-col>
        <!-- </a-form-model> -->
        <a-col v-show="!model || !model.docId > 0" :md="12" :sm="24">
          <a-form-item>
            <a-button type="dashed" style="width: 80%" @click="addList"> <a-icon type="plus" /> 新增种类 </a-button>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24" v-if="model && model.auth == 'auth' && model.detail[0].processState == 'vessel'">
          <a-col :md="12" :sm="24">
            <a-form-item label="转移单位" :labelCol="{ span: 6 }">
              <a-select
                placeholder="请选择"
                v-decorator="['unitId', { rules: [{ required: true, message: '请输入!' }] }]"
              >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item>
              <a-input v-decorator="['unitName', { rules: [{ required: true, message: '请输入!' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="处理意见" :labelCol="{ span: 6 }">
              <a-input v-decorator="['opinion']" />
            </a-form-item>
          </a-col>
        </a-col>
        <a-col :md="24" :sm="24" v-if="model && model.auth == 'auth' && model.detail[0].processState == 'accept'">
          <a-col :md="12" :sm="24">
            <a-form-item label="处置单位" :labelCol="{ span: 6 }">
              <a-select
                placeholder="请选择"
                v-decorator="['unitId', { rules: [{ required: true, message: '请输入!' }] }]"
              >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item>
              <a-input v-decorator="['unitName', { rules: [{ required: true, message: '请输入!' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="处理意见" :labelCol="{ span: 6 }">
              <a-input v-decorator="['opinion']" />
            </a-form-item>
          </a-col>
        </a-col>
        <a-col :md="24" :sm="24">
          <div class="ant-modal-footer">
            <div>
              <button
                v-if="model && model.auth == 'auth'"
                type="button"
                @click="reject"
                class="ant-btn ant-btn-primary"
                ant-click-animating-without-extra-node="false"
              >
                <span>退回</span>
              </button>
              <button
                v-if="model && model.auth == 'auth'"
                type="button"
                @click="pass"
                class="ant-btn ant-btn-primary"
                ant-click-animating-without-extra-node="false"
              >
                <span>审 核</span>
              </button>
              <button
                v-else
                type="button"
                @click="ok"
                class="ant-btn ant-btn-primary"
                ant-click-animating-without-extra-node="false"
              >
                <span>确 定</span>
              </button>
            </div>
          </div>
        </a-col>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import moment from 'moment'
// 表单字段
const fields = [
  'dischargePlace',
  'dischargeTimeStr',
  'docId',
  'managerContact',
  'managerName',
  'vesselMmsi',
  'vesselName',
  'remark',
]

export default {
  props: {
    // visible: {
    //   type: Boolean,
    //   required: true,
    // },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
    }
    return {
      disabled: false,
      form: this.$form.createForm(this),
      detailList: [],
      POLLUTANT_TYPE: [],
      rules: {
        processState: [{ required: true, message: '请输入!', trigger: 'blur' }],
        pollutantSort: [{ required: true, message: '请输入!', trigger: 'blur' }],
        pollutantType: [{ required: true, message: '请输入!', trigger: 'blur' }],
        pollutantVolume: [{ required: true, message: '请输入!', trigger: 'blur' }],
        pollutantWeight: [{ required: true, message: '请输入!', trigger: 'blur' }],
        returnFlag: [{ required: true, message: '请输入!', trigger: 'blur' }],
      },
    }
  },

  created() {
    console.log('custom modal created')
    this.init()
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.form.resetFields()
      this.disabled = false
      if (this.model == null) {
        this.detailList = []
      } else {
        if (this.model.auth == 'auth') this.disabled = true
        this.detailList = this.model.detail
        this.detailList.forEach((value, index) => {
          this.handleProvinceChange(value.pollutantType, index)
        })
      }
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    moment,
    cancel(e) {
      this.$emit('cancel')
    },
    ok(e) {
      // let state = true
      // const that = this
      // this.detailList.forEach((value, index) => {
      //   const form = 'Form' + index
      //   that.$refs[form].validate((valid) => {
      //     if (!valid) {
      //       state = false
      //     }
      //   })
      // })
      // if (state) {
      //   this.$emit('ok')
      // }
      this.$emit('ok')
    },
    pass(e) {
      this.$emit('pass')
    },
    reject(e) {
      this.$emit('reject')
    },
    addList() {
      const detail = {
        status: 0,
        // POLLUTANT_TYPE:'1'
      }
      this.detailList.push(detail)
    },
    delitem(index) {
      this.detailList.splice(index, 1)
    },
    handleProvinceChange(value, index) {
      this.GetPOLLUTANT_SUB_TYPE(index, value)
    },
    init() {
      this.GetPOLLUTANT_TYPE()
    },
    GetPOLLUTANT_TYPE() {
      const that = this
      that.$store.dispatch('GetPOLLUTANT_TYPE').then(() => {
        that.POLLUTANT_TYPE = that.$store.getters.POLLUTANT_TYPE
      })
    },
    GetPOLLUTANT_SUB_TYPE(index, id) {
      const that = this
      const param = {
        id: id,
      }
       that.detailList[index].POLLUTANT_SUB_TYPE = that.POLLUTANT_TYPE.find(
          (m) => m.code === param.id
        ).children
        that.$forceUpdate()
    },
  },
}
</script>
